<template>
  <div class="h-full w-full flex flex-col bg-center bg-scroll bg-contain p-1" :style="{backgroundImage:`url(${bgimg})`}">
    <div class="w-full h-1/2 flex justify-between items-center" >
      <div class="flex flex-col">
        <span>{{nowtianqi ? nowtianqi.city || "":""}}</span>
        <span>{{nowtianqi ? nowtianqi.tem || "0":"0"}}℃</span>
      </div>
      <div class="flex flex-col items-end">
        <span>{{nowtianqi ? nowtianqi.wea || "":""}}</span>
        <span>最高气温{{nowtianqi ? nowtianqi.tem_day || "0":"0"}}℃，最低气温{{nowtianqi ? nowtianqi.tem_night || "0":"0"}}℃</span>
      </div>
    </div>
    <div class="w-full h-1/2 flex justify-evenly items-center">
      <div class="flex flex-col justify-center items-center p-2 bg-blue-400 bg-opacity-0 cursor-pointer hover:bg-opacity-30" v-for="(item,index) in seventianqi">
        <span>{{item.date || ""}}</span>
        <span>{{item.wea || ""}}</span>
        <span>{{item.tem_day || ""}}-{{item.tem_night || ""}}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import http from "@/request/request"
import useState from '../../hooks/useState'
import {useMessage} from 'naive-ui'
const router = useRouter()
const route = useRoute()
const message = useMessage()
const nowtianqi = useState("nowtianqi")
const seventianqi = useState("seventianqi",[])
const getnowtianqi = ()=>{
  console.log("获取一天天气")
  http.tianqi().then(res=>{
    if(res.status===200){
      nowtianqi.value = {...res.data,createTime:new Date().getTime()}
    }else{
      message.error("更新天气失败")
    }
  }).catch(err=>{
    message.error(err)
  })
  console.log("获取七天天气")
  http.weektianqi().then(res=>{
    if(res.status===200){
      console.log(res.data,"七天啊")
      seventianqi.value = [...res.data.data]
    }else{
      message.error("更新天气失败")
    }
  }).catch(err=>{
    message.error(err)
  })
}
// 循环获取天气
const xunhuantianqi=(time=null)=>{
  getnowtianqi()
  setInterval(()=>{
    getnowtianqi()
  },10*60*1000)
}
/*
* 初始化的时候，从本地获取天气的信息，如果有，判断上次获取的时间，
* 如果大于10分钟，直接获取，如果小于10分钟，等会获取
* 如果数据不存在，直接获取
* */
const inittianqi=()=>{
  if(nowtianqi.value){
    if(nowtianqi.value.createTime){
      if(new Date().getTime() - nowtianqi.value.createTime > 10*60*1000){
        xunhuantianqi()
      }else{
        setTimeout(()=>{
          xunhuantianqi()
        },10*60*1000)
      }
    }else{
      xunhuantianqi()
    }
  }else{
    xunhuantianqi()
  }
}
const tianqi = ref("")
// 背景图片
const bgimg=computed(()=>{
  switch(tianqi.value){
    case "雪":
      return "http://n.sinaimg.cn/sinakd20210930s/448/w1024h1024/20210930/fc41-705a7910c7b96c7dc5f364cb6234fd1f.jpg"
    case "雷":
      return "http://n.sinaimg.cn/sinakd20210930s/448/w1024h1024/20210930/fc41-705a7910c7b96c7dc5f364cb6234fd1f.jpg"
    case "沙尘":
      return "http://n.sinaimg.cn/sinakd20210930s/448/w1024h1024/20210930/fc41-705a7910c7b96c7dc5f364cb6234fd1f.jpg"
    case "雾":
      return "http://n.sinaimg.cn/sinakd20210930s/448/w1024h1024/20210930/fc41-705a7910c7b96c7dc5f364cb6234fd1f.jpg"
    case "冰雹":
      return "http://n.sinaimg.cn/sinakd20210930s/448/w1024h1024/20210930/fc41-705a7910c7b96c7dc5f364cb6234fd1f.jpg"
    case "多云":
      return "http://n.sinaimg.cn/sinakd20210930s/448/w1024h1024/20210930/fc41-705a7910c7b96c7dc5f364cb6234fd1f.jpg"
    case "雨":
      return "http://n.sinaimg.cn/sinakd20210930s/448/w1024h1024/20210930/fc41-705a7910c7b96c7dc5f364cb6234fd1f.jpg"
    case "阴":
      return "http://n.sinaimg.cn/sinakd20210930s/448/w1024h1024/20210930/fc41-705a7910c7b96c7dc5f364cb6234fd1f.jpg"
    case "晴":
      return "http://n.sinaimg.cn/sinakd20210930s/448/w1024h1024/20210930/fc41-705a7910c7b96c7dc5f364cb6234fd1f.jpg"
    default:
      return "http://n.sinaimg.cn/sinakd20210930s/448/w1024h1024/20210930/fc41-705a7910c7b96c7dc5f364cb6234fd1f.jpg"
  }
})

// 初始化区域
inittianqi()
</script>

<style scoped>

</style>